<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灌水区</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/square.css">
    <script src="js/jQuery.min.js"></script>
    <meta http-equiv="refresh" content="5">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="Imag/导航栏头像.png" alt="这是导航栏头像">
        <!-- span 标签不独占一行, 是一个小盒子 -->
        <span class="title"> 我的博客系统 </span>
        <div class="spacer"></div>
        <!-- # 在a标签中表示占位符 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_editor.html">写博客</a>
        <a href="login.html" id="exit">注销</a>
    </div>

    <!-- 灌水区盒子 -->
    <div class="all">

        <!-- 灌水区左侧公告盒子 -->
        <div class="all-left">
            <!-- 盒子中的公告栏 -->
            <div class=" notice">
                <h3>公告栏</h3>

                <div class="row">
                    <p id="title">灌水乐园是众多技术博友交流之地, 在此你可以看到大家的优质文章, 
                        这儿不仅各种技术栈, 还有各类学科文章, 在灌水区尽情的玩耍吧, 欢迎你得加入!
                    </p>
                </div> 
                
                <div class="row" >
                    <p id="placard">来自管理清欢的公告</p>
                </div>
                
                <div class="row" >
                    <p id="L">小提示</p>
                </div>
                        
                <div class="row">
                    <p id="question">如有问题, 您可以在此留言, 我们将尽全力为您解决问题!</p>
                </div>

                <div class="row">
                    <p id="QQ">QQ:1843977391</p>
                </div>

            </div>
            <br>
            <div class="wall">
                <h3>在此处留言</h3>
                <input type="text" id="message">
                <br>
                <button id="button">留言(凑合用)</button>
                <br>
            </div> 


        </div>
        <!-- 灌水区 右侧内容盒子 -->
        <div class="all-right">

        </div>
    </div>

<!-- 此处编写 js 代码 -->
    <script>


        

        // 在页面加载时,向服务器获取博客内容
        function getBlogs() {
            $.ajax({
                type: 'get',
                url: 'blog',
                success : function(body) {
                    console.log(body);

                    // 响应得 body 是一个 json 字符串, 此处已经被 jQuery 解析成 js 对象数组了
                    // 遍历 body 获取
                    for(let blog of body) {
                        let containerRight = document.querySelector('.all-right');

                        // 添加一个 整个博客 div
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';

                        // 构造标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);

                        // 构造发布时间
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.postTime
                        blogDiv.appendChild(dateDiv);

                        // 构造博客摘要
                        let articleDiv = document.createElement('div');
                        articleDiv.className = 'article';
                        // 此处得正文是后端发来的, 该数据是通过 selectAll中得方法得到的截断后得content
                        articleDiv.innerHTML = blog.content;
                        blogDiv.appendChild(articleDiv);

                        // 构造查看全文按钮
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 &gt&gt';
                        // 要求点击查看全文按钮以后跳转到详情页面
                        // 为了让博客页面知道是具体那篇博客, 将 blogId 传入
                        // 跳转路径
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a)

                        // 把整个 blogdiv 挂在 dom 树上
                        containerRight.appendChild(blogDiv);
                        console.log("添加成功!!! ");
                        console.log(a);
                    }
                }
            });
        }

        // 调用函数
        getBlogs();


        let wallDiv = document.querySelector('.wall');
        let message = document.querySelector('#message');
        let button = document.querySelector('#button');

        // 当点击提交留言的时候
        button.onclick = function() {
            // 判定发送内容是否为空
            if(message.value.length <= 0) {
                alert('请输入内容后在留言');
                return;
            }

            // 构造一个新的 div 
            let rowDiv = document.createElement('div');
            // 给该新 div 取名
            rowDiv.className = 'xiaoxi';
            rowDiv.innerHTML = message.value;

            // 挂回 dom 树
            wallDiv.appendChild(rowDiv);

            // 提交后清空当前输入框

            $.ajax({
                type:'post',
                url:'message',
                data:JSON.stringify({'message':message.value}),
                contentType:'application/json; charset = utf8',
                success: function(body) {
                    
                    console.log("留言成功!");
                }
            });

            message.value = "";
            

        }

        $.ajax({
            type:'get',
            url:'message',
            contentType:'application/json; charset = utf8',
            success:function(body) {
                // 此时的 body 是一个 Message 数组对象
                for(let i = 0; i < body.length; i++) {
                    let rowDiv = document.createElement('div');
                    rowDiv.className = 'xiaoxi';
                    rowDiv.innerHTML = body[i].message;
                    // 挂到dom树上
                    wallDiv.appendChild(rowDiv);
                    console.log(body[i].message);
                }
            }
        });


        


        // 强制登录检测
        function forceLogin() {
            $.ajax({
                type: 'get',
                url: 'force',
                success: function(body) {
                    if(body.userId != null && body.userId > 0) {
                        // 登录成功
                        console.log("登录成功");
                        console.log(body.userId);
                    } else {
                        // 未登录强制跳转
                        location.assign('login.html');
                    }
                }
            });
        }

        forceLogin();

        // 退出登陆
        let exit = document.querySelector('#exit');
        exit.onclick = function() {
            $.ajax({
                type:'get',
                url:'exit',
                contentType:'application/json; charset = utf8',
                success:function(body) {
                    if(body.issuccess == true) {
                        alert('注销成功!');
                        location.assign('login.html');
                        
                    } else {
                        alert('当前未登录, 无法执行该操作!');
                        return;
                    }
                }
            });
        }

        
        window.setTimeout(function(){				    	
            window.location.reload();
            console.log("刷新");				
        },20000);

    </script>

</body>
</html>


<!-- <div class="row">
    <p id="title">灌水乐园是众多技术博友交流之地, 在此你可以看到大家的优质文章, 
        这儿不仅各种技术栈, 还有各类学科文章, 在灌水区尽情的玩耍吧, 欢迎你得加入!</p>
</div>

<div class="row" >
    <p id="placard">来自管理清欢的公告</p>
</div>

<div class="row" >
    <p id="L">留言板</p>
</div>

<div class="row">
    <p id="question">
    如有问题, 您可以在此留言, 我们将尽全力为您解决问题!
    </p>
</div>


<div class="row">
    <p id="QQ">QQ:1843977391</p>
</div>

<div class="wall">

</div> -->